<template>
  <view class="message-container" :style="'top:'+top+'px'">
    <view class="message-header">
      <view class="read-all">
<!--        <text class="all" @click="markAllRead">-->
<!--          全部已读-->
<!--        </text>-->
        <image style="margin-right: 10rpx;width: 12px;height: 12px" :src="IMAGE_CONFIG.fanKui2"></image>
        <text @click="jumpFeedback">
          反馈
        </text>
      </view>
      <view class="title">消息</view>
    </view>
    <view
        class="message-item"
        v-for="(item, index) in typeList"
        :key="index"
        :style="'background-color:'+item.color "
    >
      <view class="message-content" @click="jumpNotice(index)">
        <view class="message-icon">
          <image style="width: 100%;height: 100%" :src="item.icon"></image>
        </view>
        <view style="position: relative;width: 90%">
          <view class="message-info">
            <view class="message-type">{{ item.messageTypeStr }}</view>
            <view class="message-time">{{ item.sendTime?item.sendTime.substr(0, 10) : '' }}</view>
          </view>
          <view class="message-tips" v-if="!item.isRead"></view>

          <view class="message-detail">{{ item.content }}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {getMessage} from "../../api/new";
import {IMAGE_CONFIG} from '@/utils/imageConfig'

export default {
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.message,
      style:[
        {
          name: '系统消息',
          icon: IMAGE_CONFIG.message.message1,
          color:'#FDFDE5',
          messageType:'SYSTEM'
        },
        {
          name: '课程消息',
          icon: IMAGE_CONFIG.message.message2,
          color:'#FCF7E2',
          messageType:'COURSE'
        },
        {
          name: '活动通知',
          icon: IMAGE_CONFIG.message.message3,
          color:'#FDF1E3',
          messageType:'ACTIVITY'
        },
        {
          name: '学习提醒',
          icon: IMAGE_CONFIG.message.message4,
          color:'#ffece8',
          messageType:'STUDY'
        },
        {
          name: '账号消息',
          icon: IMAGE_CONFIG.message.message5,
          color:'#E6F4EA',
          messageType:'ACCOUNT'
        }
      ],
      typeList: [],
      top:0
    };
  },
  onLoad() {
    this.top = uni.getMenuButtonBoundingClientRect().top;
  },
  onShow(){
    this.getList()
    console.log(this.$store.state.app.token)
  },
  methods: {
    getList(){
      getMessage().then(res=>{
        this.typeList=res.data
        console.log(res.data)
        // 使用上面的合并函数
        this.typeList = this.typeList.map(itemA => {
          const matchedItem = this.style.find(itemB => itemB.messageType === itemA.messageType);
          if (matchedItem) {
            return {
              ...itemA,
              icon: matchedItem.icon,
              color: matchedItem.color,
              name: matchedItem.name
            };
          }
          return itemA;
        });

        uni.setStorageSync('typeList', this.typeList);
        console.log(uni.getStorageSync('typeList'))
      })
    },
    // markAllRead() {
    //   // 这里可以实现将所有消息标记为已读的逻辑，比如发送请求到后端等
    //   console.log('全部已读操作');
    //   postMessages().then(() =>{uni.showToast({
    //     title: '消息已经全部已读！',
    //     icon: 'success',
    //   });
    //
    //     this.getList()
    //   })
    // },
    jumpNotice(index){
      uni.navigateTo({
        url: '/pages/notice/index?index=' + index
      })
    },
    jumpFeedback(){
      uni.navigateTo({
        url: '/pages/complaint/index'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.message-container {
  padding: 0 15px;
  position: relative;

}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}

.title {
  font-size: 33rpx;
  font-weight: bold;
  color: #8B4513;
  width: 100rpx;
  text-align: center;
  margin: auto;
  font-weight: bold;
}

.read-all {
  font-size: 11px;
  color: #8B5E3C;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  //.all{
  //  text-decoration: underline;
  //  text-decoration-color: #8B5E3C; /* 线条颜色 */
  //  text-decoration-thickness: 1px; /* 线条粗细 */
  //  text-underline-offset: 2px; /* 线条与文字的间距 */
  //  margin-right: 20rpx;
  //}
}

.message-item {
  background-color: #fff;
  padding: 20px 16px;
  border-radius: 5px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  //border: 1px solid #333333;
  margin-bottom: 15px;
  position: relative;
}


.message-content {
  display: flex;
  align-items: flex-start;
}

.message-icon {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.message-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.message-type {
  font-size: 18px;
  color: #000;
}

.message-time {
  font-size: 12px;
  color: #4B5563;
  position: absolute;
  top: 0;
  right: 0;
}

.message-detail {
  font-size: 14px;
  color: #4B5563;
  margin-top: 5px;
  width: 84%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-tips {
  width: 8px;
  height: 8px;
  background-color: #EF4444;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 18px;
}
</style>